<template>
	<view class="reward-history-list">
		<custom-tabs type="c1" :value="current" @change="change" :tabSpacing="54">
			<custom-tab-pane style="width:100%" :label="item.label" name="c1_2"
				v-for="item,index in IRewardHistoryOptionsGroup" :key="index">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
					<view class="reward-history-list-wrapper">
						<rewardHistoryItem v-for="subitem in item.list" :key="subitem.id" :detail="subitem"/>
						<g-placeholder v-if="!item.list.length&&item.loadingStatus ===LOADING_STATUS.NOMORE" />
						<uni-load-more :status="item.loadingStatus" v-else  @click.native="getRewardHistoryList"/>
					</view>
				</scroll-view>
			</custom-tab-pane>
		</custom-tabs>
	</view>
</template>

<script lang="ts" setup>
	import { computed, reactive, ref, Ref, defineExpose } from 'vue';
	import { IRewardHistoryOptions, IGetRewardListOptions, IGetRewardListResult, ITabsChangeEvent, IRewardHistoryListExpose } from './types';
	import { ACTIVATE_STATUS, ACTIVATE_STATUS_NAME } from '@/enum/device';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import rewardHistoryItem from '../reward-history-item/rewardHistoryItem';
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const store = useStore();

	const keyword : Ref<string> = ref('');

	const IRewardHistoryOptionsGroup : IRewardHistoryOptions[] = reactive([
		{
			label: '全部',
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 4,
			pageNum: 1,
			list: []
		},
		{
			activateStatus: ACTIVATE_STATUS.ACTIVATED,
			label: ACTIVATE_STATUS_NAME.ACTIVATED,
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 4,
			pageNum: 1,
			list: []
		},
		{
			activateStatus: ACTIVATE_STATUS.UNACTIVATED,
			label: ACTIVATE_STATUS_NAME.UNACTIVATED,
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 4,
			pageNum: 1,
			list: []
		},
		{
			activateStatus: ACTIVATE_STATUS.PSEUDO_ACTIVATED,
			label: ACTIVATE_STATUS_NAME.PSEUDO_ACTIVATED,
			loadingStatus: LOADING_STATUS.MORE,
			pageSize: 4,
			pageNum: 1,
			list: []
		},
	])

	const current : Ref<number> = ref(0);

	const getRewardHistoryList = async () : Promise<void> => {
		await uni.loginManger.$interceptor;
		const currentIndex : number = current.value;
		if (IRewardHistoryOptionsGroup[currentIndex].loadingStatus !== LOADING_STATUS.MORE) return;

		const options : IGetRewardListOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			activate_type: IRewardHistoryOptionsGroup[currentIndex].activateStatus,
			page: IRewardHistoryOptionsGroup[currentIndex].pageNum,
			page_num: IRewardHistoryOptionsGroup[currentIndex].pageSize,
			model_sn: keyword.value,
		}
		IRewardHistoryOptionsGroup[currentIndex].loadingStatus = LOADING_STATUS.LOADING;
		try {
			const { data, total } : IGetRewardListResult = (await uni.http.POST(REST_URL.activateRewardList, options)).data;
			IRewardHistoryOptionsGroup[currentIndex].list.push(...data);
			IRewardHistoryOptionsGroup[currentIndex].loadingStatus = IRewardHistoryOptionsGroup[currentIndex].list.length >= total - 1 ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
			IRewardHistoryOptionsGroup[currentIndex].pageNum++;
		} catch (e) {
			IRewardHistoryOptionsGroup[currentIndex].loadingStatus = LOADING_STATUS.NOMORE;
		}
	}

	getRewardHistoryList();







	const change = (e : ITabsChangeEvent) => {
		current.value = e.value;
		if (IRewardHistoryOptionsGroup[current.value].list.length) return
		getRewardHistoryList();
	}

	const scrolltolower = () => {
		getRewardHistoryList();
	}

	const searchByKeyword = (searchKeyword : string) => {
		if (searchKeyword === keyword.value) {
			return
		}
		keyword.value = searchKeyword;
		cleanList();
		getRewardHistoryList();
	}

	const cleanList = () => {
		for (let item of IRewardHistoryOptionsGroup) {
			item.list.length = 0;
			item.loadingStatus = LOADING_STATUS.MORE;
			item.pageNum = 1;
		}
	}

	defineExpose<IRewardHistoryListExpose>({
		searchByKeyword,
	})
</script>

<style scoped lang="scss">
	@import "./rewardHistoryList.scss";
</style>